<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <p>{{age===10?"渲染":""}}</p>
    <p v-if="true">100</p>
    <p v-if="false">200</p>
    <p v-if="">300</p>
    <p v-if="''">400</p>
    <p v-if="{}">500</p>
    <p v-if="[]">600</p>
    <p v-if="age===10">700</p>
    <p v-if="undefined">800</p>
    <p v-if="null">900</p>
    <hr/>
    <p v-if="isLogin">已经登陆</p>
    <form v-else>
        <input type="text" placeholder="请输入账号">
        <input type="password" placeholder="请输入密码">
    </form>
    <hr/>
    <hr/>
    <hr/>
    <template v-if="isLogin">
        <p>已经登陆：欢迎xxx的到来</p>
        <p>昵称：xxxxx</p>
        <p>年龄：21</p>
    </template>

    <form v-else>
        <input type="text" placeholder="请输入账号">
        <input type="password" placeholder="请输入密码">
    </form>
    <hr/>
    <p v-if="age<10">幼儿</p>
    <div>老段今年62</div>
    <p v-else-if="age<12">儿童</p>
    <div>老段今年61</div>
    <p v-else-if="age<16">少年</p>
    <div>老段今年60</div>
    <p v-else-if="age<28">青年</p>
    <div>老段今年61</div>
    <p v-else-if="age<40">壮年</p>
    <p v-else>老年</p>

</div>
</body>
<script>
    // v-if的值为一个truthy，如果满足即渲染指令所在的元素。
    // v-if v-else-if 是需要有属性值
    // v-else不需要属性值，但是需要与v-if v-else-if
    // 注意：v-if v-else-if v-else指令所在的标签之间不要出现其它的元素。
	new Vue({
		el:"#root",
        data:{
			age:101,
            isLogin:true
        }
	})
</script>
</html>